<!--
 * @Descripttion: 
 * @version: 生命周期子组件
 * @Author: wtzhang
 * @Date: 2021-07-20 13:40:09
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-20 14:30:35
-->
<template>
  <div>
    <h4>生命周期子组件</h4>
    <h4>msg：{{msg}}</h4><br>
    <button @click="changeMsg">测试update生命周期</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
export default defineComponent ({
  name: 'lifeCycleChild',
  // vue2.x生命周期钩子
  beforeCreate(){
    console.log('vue 2.x beforeCreate执行了');
  },
  created(){
    console.log('vue 2.x create执行了');
  },
  beforeMount(){
    console.log('vue 2.x beforeMount执行了');
  },
  mounted(){
    console.log('vue 2.x mounted执行了');
  },
  beforeUpdate(){
    console.log('vue 2.x beforeUpdate执行了');
  },
  updated(){
    console.log('vue 2.x update执行了');
  },
  beforeUnmount(){
    console.log('vue 2.x beforeUnmount执行了');
  },
  // vue 2.x 中的beforeDestroy 和 destroy 在 vue3.x中已经弃用了
  unmounted(){
    console.log('vue 2.x unmount执行了');
  },
  setup(){
    console.warn('setup 执行了');
    
    const msg = ref('vue 2.x 生命周期演示')
    const changeMsg = () => {
      msg.value += '====='
    }
    onBeforeMount(()=>{
      console.warn('vue 3.x onBeforeMount执行了');
    }) 
    onMounted(()=>{
      console.warn('vue 3.x onMounted执行了');
    }) 
    onBeforeUpdate(()=>{
      console.warn('vue 3.x onBeforeUpdate执行了');
    }) 
    onUpdated(()=>{
      console.warn('vue 3.x onUpdated执行了');
    }) 
    onBeforeUnmount(()=>{
      console.warn('vue 3.x onBeforeUnmount执行了');
    }) 
    onUnmounted(()=>{
      console.warn('vue 3.x onUnmounted执行了');
    }) 
    return {
      msg,
      changeMsg
    }
  }
})
</script>

<style lang="scss" scoped>
    
</style>
